<template>
    <fieldset>
        <legend>分页</legend>
        <h1 id="content">
           {{content}}
        </h1>
        <button v-for="(btn,index) in buttons" :key="index" @click="pageChange(index+1)" :class="{active:index+1===page}">
            第{{index+1}}页
        </button>
    </fieldset>
</template>
<script setup>
import { onMounted, reactive ,ref,watchEffect} from 'vue';
import cancelPromise from "./cancelPromise"

// 声明数据
let buttons = reactive(['第1页','第2页','第3页'])
// 模拟三个请求
let api1 = signal =>new cancelPromise((resolve,reject)=>{
    setTimeout(() => {
        resolve('第一页的数据')
    }, 1000);
},signal)
let api2= signal =>new cancelPromise((resolve,reject)=>{
    setTimeout(() => {
        resolve('第二页的数据')
    }, 1500);
},signal)
let api3= signal =>new cancelPromise((resolve,reject)=>{
    setTimeout(() => {
        resolve('第三页的数据')
    }, 2000);
},signal)
// 模拟请求
let api = {
    api1,
    api2,
    api3
}
// 声明一个响应式的变量，获取内容
let content = ref('')
// 声明一个三方的响应式变量来作为按钮的激活条件
let page = ref(1)
// 点击分页获取数据
let pageChange= function(pageSize){
    console.log(pageSize);
    // fetchData(pageSize)
    // 给第三方作为激活条件的变量赋值
    page.value = pageSize
}
// 封装一个获取列表的方法
/**
 * 
 * @param {Number} pageSize  传递给后台的页码
 * @param {Object} pageSize  控制器（AbortController)的signal对象
 */
let fetchData = (pageSize=1,signal)=>(
    api['api'+ pageSize](signal)
    .then(res=>{
        console.log(res);
        content.value = res
    })
)
// 使用watchEffect
watchEffect(invalidate=>{
    // 声明一个控制器
    let abortController = new AbortController();
    // 获取signal对象
    let signal =abortController.signal;
    // 发起请求并且传入signal对象
    fetchData(page.value,signal)
    invalidate(()=>{
        // 页码切换之前，取消上一个promise
        abortController.abort()
    })

})
// 页面加载的时候，获取第一页的数据
// onMounted(()=>{
//     fetchData(1)
// })
</script>
<style>
.active{
    background-color: pink;
}
</style>